<template>
  <div>
    <!-- 全选：<input type="checkbox" v-model="allCheck" @change="toggleAll"> -->
    全选：<input type="checkbox" v-model="allChoose">
    <hr>
    <ul>
      <li v-for="item in cart" :key="item.id">
        <input type="checkbox" :checked="item.isSelect" v-model="item.isSelect"/>
        {{ item.name }} -- 单价 {{ item.price }} 购买数量:
        <input type="number" v-model="item.count" />
      </li>
    </ul>
    <p>总价：{{totalPrice}}</p>
    <button @click="change">点击改变计算属性的值</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // allCheck: false,
      cart: [
        { id: 1, name: "mac air", price: 6600, count: 1, isSelect: true },
        { id: 2, name: "iphone 13", price: 8000, count: 1, isSelect: false },
        { id: 3, name: "海尔冰箱", price: 6000, count: 1, isSelect: true },
      ],
    };
  },
  methods: {
    // toggleAll() {
    //   console.log(this.allCheck);
    //   // 让所有商品的复选框和全选的复选框保持一致
    //   this.cart.forEach(item => {
    //     item.isSelect = this.allCheck
    //   })
    // }
    change() {
      // 这样写会报错，因为totalPrice这个计算属性没有提供set函数，而这里又在给totalPrice赋值
      this.totalPrice = 1000
    }
  },
  computed: {
    totalPrice() {
      let total = 0
      this.cart.map(item => {
        if(item.isSelect) {
          total += item.price * item.count
        }
      })
      return total
    },
    // 计算属性也可以赋值，如果赋值的话需要采用get 和 set函数的写法
    allChoose: {
      // get用于获取计算属性的值
      get: function() {
        return this.cart.every(item => item.isSelect)
      },
      // // set用于设置计算属性的值,参数v代表设置的新值。比如this.allChoose = false  v就是false
      set: function(v) {
        console.log(v);
        this.cart.map(item => item.isSelect = v)
      }
    }

  },
};
</script>
<style>
li {
  list-style: none;
}
input {
  width: 50px;
}
</style>